<template>
  <div class="person-management">
    <div style="display: flex; gap: 10px; margin-bottom: 10px">
      <!-- <el-button
        type="primary"
        icon="el-icon-search"
        size="mini"
        style="margin-bottom: 5px"
        @click="editTable"
        >新增</el-button
      > -->
      <el-button
        type="primary"
        size="mini"
        style="margin-bottom: 5px; margin-left: 0px"
        @click="exportTable()"
      >
        导出 Excel
      </el-button>
      <el-upload
        :show-file-list="false"
        :before-upload="beforeUpload"
        :action="''"
        accept=".xlsx, .xls"
      >
        <el-button type="primary" size="mini">导入 Excel</el-button>
      </el-upload>
      <el-button
        type="danger"
        size="mini"
        style="margin-bottom: 5px"
        @click="handleDelete(selectedRows)"
      >
        批量删除
      </el-button>
    </div>
    <!-- 页面表格 -->
    <div style="overflow-y: auto; height: calc(100vh - 170px); background: #212830;">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        height="100%"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        :stripe="false"
        :header-cell-style="{
          background: '#212830',
          color: '#c7c7c9',
          border: '1px solid #4e4c4c',
        }"
        @selection-change="handleSelectionChange"
        ref="multipleTable"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="barcode" label="资产条码"></el-table-column>
        <el-table-column prop="name" label="资产名称"></el-table-column>
        <el-table-column prop="usePeriod" label="使用期限"></el-table-column>
        <!-- <el-table-column prop="model" label="规格型号"></el-table-column> -->
        <el-table-column prop="type" label="资产类型"></el-table-column>
        <!-- <el-table-column
        prop="productSequence"
        label="产品序列"
      ></el-table-column> -->

        <el-table-column prop="quantity" label="数量"></el-table-column>

        <el-table-column prop="amount" label="金额"></el-table-column>
        <el-table-column prop="unit" label="单位"></el-table-column>
        <el-table-column prop="state" label="资产状态">
          <template slot-scope="scope">
            <span v-if="scope.row.state === '闲置'">闲置</span>
            <span v-else-if="scope.row.state === '使用中'">使用中</span>
            <span v-else-if="scope.row.state === '维修中'">维修中</span>
            <span v-else-if="scope.row.state === '丢失'">丢失</span>
            <span v-else-if="scope.row.state === '借出'">借出</span>
            <span v-else>未知状态</span>
          </template>
        </el-table-column>
        <el-table-column prop="user" label="使用人"></el-table-column>
        <el-table-column prop="location" label="存放地点"></el-table-column>
        <el-table-column prop="administrator" label="管理员"></el-table-column>
        <el-table-column
          prop="purchaseTime"
          label="购买时间"
          :sortable="customSort"
        ></el-table-column>
        <el-table-column prop="source" label="来源"></el-table-column>
        <el-table-column label="图片">
          <template slot-scope="scope">
            <div v-if="scope.row.pictureUrl">
              <img
                :src="scope.row.pictureUrl"
                alt="图片"
                @click="previewImage(scope.row.pictureUrl)"
                style="
                  width: 60px;
                  height: 60px;
                  object-fit: cover;
                  border-radius: 6px;
                  cursor: pointer;
                "
              />
            </div>
            <div v-else style="color: #999; font-size: 12px">暂无图片</div>
          </template>
        </el-table-column>

        <el-table-column prop="link" label="链接">
          <template slot-scope="scope">
            <el-tooltip content="点击复制" placement="top">
              <span
                style="cursor: pointer; color: #409eff"
                @click="copyToClipboard(scope.row.link)"
              >
                {{ scope.row.link }}
              </span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="备注"></el-table-column>

        <el-table-column fixed="right" label="操作" width="100" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button
              style="cursor: pointer"
              @click="editClick(scope.row)"
              type="text"
              size="small"
            >
              编辑
            </el-button>
            <el-button
              style="cursor: pointer"
              @click="handleClick(scope.row)"
              type="text"
              size="small"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog :visible.sync="previewDialogVisible" center>
      <img :src="previewImageUrl" alt="大图" style="max-width: 100%" />
    </el-dialog>

    <!-- 新增的弹窗 -->
    <el-dialog
      title="资产信息"
      :visible.sync="dialogTableVisible"
      width="75%"
      top="20vh"
      :close-on-click-modal="false"
    >
      <div style="display: flex">
        <!-- 左侧菜单 -->
        <el-menu
          :default-active="activeTab"
          class="el-menu-vertical"
          @select="handleMenuSelect"
          active-text-color="#409EFF"
        >
          <el-menu-item index="basic">基本信息</el-menu-item>
          <el-menu-item index="repair">维保信息</el-menu-item>
        </el-menu>

        <!-- 表单主体  disabled禁止输入属性-->
        <div style="flex: 1; padding-left: 30px">
          <el-form ref="form" :model="form" label-width="90px" :rules="rules" label-position="left">
            <template v-if="activeTab === 'basic'">
              <el-row :gutter="20">
                <el-col :span="6">
                  <el-form-item label="资产条码" prop="barcode">
                    <el-input v-model="form.barcode" placeholder="请输入内容" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="资产名称" prop="name">
                    <el-input v-model="form.name" placeholder="请输入内容" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="使用期限" prop="usePeriod">
                    <el-input v-model="form.usePeriod" placeholder="请输入数字" />
                  </el-form-item>
                </el-col>

                <el-col :span="6">
                  <el-form-item label="规格型号" prop="model">
                    <el-input v-model="form.model" placeholder="请输入内容" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="产品序列" prop="productSequence">
                    <el-input v-model="form.productSequence" placeholder="请输入内容" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="资产类型" prop="type">
                    <el-input v-model="form.type" placeholder="请输入内容" />
                  </el-form-item>
                </el-col>

                <el-col :span="6">
                  <el-form-item label="金额" prop="amount">
                    <el-input v-model="form.amount" placeholder="请输入金额" />
                  </el-form-item>
                </el-col>

                <el-col :span="6">
                  <el-form-item label="数量" prop="quantity">
                    <el-input v-model="form.quantity" placeholder="请输入数量" />
                  </el-form-item>
                </el-col>

                <el-col :span="6">
                  <el-form-item label="单位" prop="unit">
                    <el-input v-model="form.unit" placeholder="请输入内容" />
                  </el-form-item>
                </el-col>
                <!-- <el-col :span="8">
                  <el-form-item label="使用公司">
                    <el-select v-model="form.company" placeholder="请选择">
                      <el-option label="公司A" value="A" />
                      <el-option label="公司B" value="B" />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="使用部门">
                    <el-select v-model="form.department" placeholder="请选择">
                      <el-option label="IT部" value="it" />
                      <el-option label="财务部" value="finance" />
                    </el-select>
                  </el-form-item>
                </el-col> -->
                <el-col :span="6">
                  <el-form-item label="资产状态" prop="state">
                    <el-select v-model="form.state" placeholder="请选择资产状态" clearable>
                      <el-option label="闲置" value="闲置"></el-option>
                      <el-option label="丢失" value="丢失"></el-option>
                      <el-option label="借出" value="借出"></el-option>
                      <el-option label="使用中" value="使用中"></el-option>
                      <el-option label="维修中" value="维修中"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>

                <!-- <el-col :span="6">
                  <el-form-item label="使用人">
                    <el-select v-model="form.user" placeholder="请选择">
                      <el-option label="张三" value="zhang" />
                      <el-option label="李四" value="li" />
                    </el-select>
                  </el-form-item>
                </el-col> -->
                <el-col :span="6">
                  <el-form-item label="使用人" prop="user">
                    <el-input v-model="form.user" placeholder="请输入内容" />
                  </el-form-item>
                </el-col>
                <!-- <el-col :span="6">
                  <el-form-item label="管理员">
                    <el-select v-model="form.admin" placeholder="请选择">
                      <el-option label="王五" value="wang" />
                      <el-option label="赵六" value="zhao" />
                    </el-select>
                  </el-form-item>
                </el-col> -->
                <el-col :span="6">
                  <el-form-item label="管理员" prop="administrator">
                    <el-input v-model="form.administrator" placeholder="请输入内容" />
                  </el-form-item>
                </el-col>

                <!-- <el-col :span="6">
                  <el-form-item label="存放地点">
                    <el-select v-model="form.location" placeholder="请选择">
                      <el-option label="仓库1" value="wh1" />
                      <el-option label="仓库2" value="wh2" />
                    </el-select>
                  </el-form-item>
                </el-col> -->
                <el-col :span="6">
                  <el-form-item label="存放地点" prop="location">
                    <el-input v-model="form.location" placeholder="请输入内容" />
                  </el-form-item>
                </el-col>
                <!-- <el-col :span="6">
                  <el-form-item label="来源">
                    <el-select v-model="form.source" placeholder="请选择">
                      <el-option label="采购" value="buy" />
                      <el-option label="调拨" value="transfer" />
                    </el-select>
                  </el-form-item>
                </el-col> -->
                <el-col :span="6">
                  <el-form-item label="使用公司" prop="useCompany">
                    <el-input v-model="form.useCompany" placeholder="请输入内容" />
                  </el-form-item>
                </el-col>

                <el-col :span="6">
                  <el-form-item label="来源" prop="source">
                    <el-input v-model="form.source" placeholder="请输入内容" />
                  </el-form-item>
                </el-col>
                <!-- <el-col :span="6">
                  <el-form-item label="资产类型">
                    <el-select v-model="form.assetType" placeholder="请选择">
                      <el-option label="办公设备" value="office" />
                      <el-option label="固定资产" value="fixed" />
                    </el-select>
                  </el-form-item>
                </el-col> -->
                <el-col :span="6">
                  <el-form-item label="购买时间" prop="purchaseTime">
                    <el-date-picker
                      v-model="form.purchaseTime"
                      placeholder="选择日期"
                      style="width: 100%"
                      class="el_data"
                      value-format="yyyy-MM-dd"
                    />
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="备注" prop="description">
                    <el-input type="textarea" v-model="form.description" placeholder="" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="照片">
                    <el-upload
                      class="avatar-uploader"
                      action=""
                      list-type="picture-card"
                      :auto-upload="false"
                      :limit="1"
                      :file-list="photoList"
                      :on-change="handlePhotoChange"
                      :on-exceed="handleExceed"
                      :before-remove="beforeRemove"
                    >
                      <i v-if="photoList.length < 1" class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                  </el-form-item>
                </el-col>
              </el-row>
            </template>

            <template v-if="activeTab === 'repair'">
              <!-- 维修信息表单 -->
              <el-row :gutter="20">
                <el-col :span="6">
                  <el-form-item label="供应商">
                    <el-input v-model="form.repairInfo.vendor" placeholder="供应商" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="联系人">
                    <el-input v-model="form.repairInfo.contactPerson" placeholder="联系人" />
                  </el-form-item>
                </el-col>

                <el-col :span="6">
                  <el-form-item label="联系方式">
                    <el-input v-model="form.repairInfo.phone" placeholder="联系方式" />
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="维保到期">
                    <el-date-picker
                      v-model="form.repairInfo.expireDate"
                      placeholder="到期时间"
                      style="width: 100%"
                    />
                  </el-form-item>
                </el-col>

                <el-col :span="24">
                  <el-form-item label="备注">
                    <el-input type="textarea" v-model="form.repairInfo.note" placeholder="" />
                  </el-form-item>
                </el-col>
              </el-row>
            </template>
          </el-form>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancledia1()" size="mini">取消</el-button>
        <el-button type="primary" @click="cancledia(row)" size="mini">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import { getAssetMockData } from '../mock/mockData';
import {
  getProperty,
  addProperty,
  delProperty,
  exportProperty,
  importProperty,
} from '../api/api';
import axios from 'axios';
import XLSX from 'xlsx';
import FileSaver from 'file-saver';

const { ipcRenderer } = window.require('electron'); // w
import { serviceExe } from '../api/axios'; // w

export default {
  name: 'PropertyPage',
  data() {
    return {
      row: {},
      pageNum: 1,
      pageSize: 20,
      selectedRows: [], // 批量删除
      tableData: [], // 表格数据
      dialogTableVisible: false,
      activeTab: 'basic', // 当前激活的表单部分
      treeLevelCurrentId: void 0,

      previewDialogVisible: false,
      previewImageUrl: '',
      form: {
        barcode: '',
        name: '',
        usePeriod: '',
        model: '',
        productSequence: '',
        state: '',
        user: '',
        location: '',
        administrator: '',
        purchaseTime: '',
        source: '',
        type: '',
        useCompany: '', //使用公司
        description: '', // 描述
        quantity: '', // 数量
        file: '', // 图片
        // repairInfo: {
        //   vendor: "",
        //   contactPerson: "",
        //   phone: "",
        //   expireDate: "",
        //   note: "",
        // },
      },
      rules: {
        barcode: [{ required: true, message: '请输入资产条码', trigger: 'blur' }],
        name: [{ required: true, message: '请输入资产名称', trigger: 'blur' }],
        usePeriod: [{ required: true, message: '请输入使用期限', trigger: 'blur' }],
        model: [{ required: true, message: '请输入规格型号', trigger: 'blur' }],
        productSequence: [{ required: true, message: '请输入产品序列', trigger: 'blur' }],
        state: [{ required: true, message: '请选择资产状态', trigger: 'change' }],
        user: [{ required: true, message: '请输入使用人', trigger: 'blur' }],
        location: [{ required: true, message: '请输入存放地点', trigger: 'blur' }],
        administrator: [{ required: true, message: '请输入管理员', trigger: 'blur' }],
        purchaseTime: [{ required: true, message: '请选择购买时间', trigger: 'change' }],
        source: [{ required: true, message: '请输入来源', trigger: 'blur' }],
        type: [{ required: true, message: '请输入资产类型', trigger: 'blur' }],
        unit: [{ required: true, message: '请输入单位', trigger: 'blur' }],
        amount: [{ required: true, message: '请输入金额', trigger: 'blur' }],
        useCompany: [{ required: true, message: '请输入使用公司', trigger: 'blur' }],
        description: [{ required: true, message: '请输入备注', trigger: 'blur' }],
        quantity: [{ required: true, message: '请输入数量', trigger: 'blur' }],
      },
      editId: null, // 编辑时的id
      photoFile: null, // 用来保存选中的文件
      photoList: [],
    };
  },

  computed: {},

  mounted() {
    // this.tableData = getAssetMockData();
    this.getDate(); // 页面一加载就请求数据
  },

  created() {
    const value = ipcRenderer.sendSync('store-get', 'token'); // w
    serviceExe.defaults.headers.common['Authorization'] = value || ''; // w
  },

  methods: {
    customSort(a, b) {
      // 转为时间戳比较
      return new Date(a.purchaseTime) - new Date(b.purchaseTime);
    },

    previewImage(url) {
      this.previewImageUrl = url;
      this.previewDialogVisible = true;
    },

    handleExceed(files, fileList) {
      this.$message.warning('最多只能上传一张照片');
    },

    beforeRemove(file, fileList) {
      this.photoFile = null;
      return true;
    },

    // 照片选中
    // 只要选中/替换文件就会触发
    handlePhotoChange(file, fileList) {
      this.photoFile = file.raw; // 真实的 File 对象，用于上传
      this.photoList = fileList.slice(-1); // 更新显示列表（预览用）
    },

    copyToClipboard(text) {
      if (!text) {
        this.$message.warning('无链接可复制');
        return;
      }
      const input = document.createElement('input');
      input.value = text;
      document.body.appendChild(input);
      input.select();
      document.execCommand('copy');
      document.body.removeChild(input);
      this.$message.success('复制成功');
    },

    // 导入 Excel
    beforeUpload(file) {
      const formData = new FormData();
      formData.append('file', file); // 👈 关键：接口要求 file 字段

      importProperty(formData)
        .then(res => {
          if (res.success == true) {
            this.$message.success('导入成功');
            this.getDate(); // 重新刷新表格
          } else {
            this.$message.error(res.data.message || '导入失败');
          }
        })
        .catch(err => {
          this.$message.error('导入失败');
          console.error('导入失败', err);
        });

      // 阻止 el-upload 默认自动上传
      return false;
    },

    handleSelectionChange(val) {
      this.selectedRows = val;
    },

    // 资产页面查询
    getDate() {
      // let obj = {
      //   pageNum: 1,
      //   pageSize: 20,
      // };
      getProperty(this.pageSize, this.pageNum)
        .then(res => {
          this.tableData = res.data.data;
          this.total = res.data.data.total;
        })
        .catch(err => {
          console.error('资产获取失败', err);
        });
    },

    // 编辑资产
    editClick(row) {
      this.dialogTableVisible = true;
      this.form = { ...row }; // 建议用浅拷贝，避免直接绑定原对象
      this.editId = row.id;

      // ✅ 如果有图片，构造 el-upload 的回显格式
      if (row.pictureUrl) {
        this.photoList = [
          {
            name: '图片', // 可任意写
            url: row.pictureUrl, // 关键字段
            status: 'finished', // 必须为 finished 才会显示为已上传
          },
        ];
      } else {
        this.photoList = []; // 没图就清空
      }

      // ✅ 同时给 photoFile 设置空，避免误提交上次文件对象
      this.photoFile = null;
    },

    // 表格导出 Excel
    exportTable() {
      exportProperty()
        .then(res => {
          const blob = new Blob([res.data], {
            type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
          });
          const url = window.URL.createObjectURL(blob);
          const link = document.createElement('a');
          link.href = url;
          link.download = '资产表.xlsx';
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
          window.URL.revokeObjectURL(url);
        })
        .catch(err => {
          this.$message.error('导出失败');
          console.error('导出失败', err);
        });
    },

    // 删除按钮
    handleClick(row) {
      // 调用删除接口
      let id = row.id;
      delProperty(id).then(res => {
        this.$message.success('删除成功');
        this.getDate(); // 重新获取资产列表
      });
    },

    handleDelete(rows) {
      // 支持单个 row 或多个 rows（数组）
      let ids = [];
      if (Array.isArray(rows)) {
        ids = rows.map(item => item.id);
      } else {
        ids = [rows.id];
      }
      delProperty(ids)
        .then(res => {
          console.log(res);
          if (res.success == true) {
            this.$message.success('删除成功');
            this.getDate(); // 重新加载数据
          } else {
            // this.$message.error("删除失败");
          }
        })
        .catch(() => {
          this.$message.error('删除异常');
        });
    },

    // 新增
    editTable(row) {
      this.dialogTableVisible = true;
      let _val = JSON.parse(JSON.stringify(row));
      this.formData = _val;
      this.readonly = false;
    },

    // 切换菜单
    handleMenuSelect(index) {
      this.activeTab = index;
    },

    cancledia1() {
      this.dialogTableVisible = false;
      (this.form = []), (this.repairInfo = []);
      this.photoList = [];
      this.photoFile = null;
    },

    // 确定新增资产
    cancledia() {
      this.$refs.form.validate(valid => {
        if (!valid) {
          this.$message.error('请完整填写所有必填项');
          return;
        }

        if (!this.photoFile && this.photoList.length === 0) {
          this.$message.error('请上传资产照片');
          return;
        }

        let obj = {
          cadTreeId: 88,
          barcode: this.form.barcode,
          name: this.form.name,
          usePeriod: this.form.usePeriod,
          model: this.form.model,
          productSequence: this.form.productSequence,
          state: this.form.state,
          user: this.form.user,
          location: this.form.location,
          administrator: this.form.administrator,
          purchaseTime: this.form.purchaseTime,
          source: this.form.source,
          type: this.form.type,
          unit: this.form.unit,
          amount: this.form.amount,
          useCompany: this.form.useCompany,
          description: this.form.description,
          quantity: this.form.quantity,
          file: this.photoFile,
        };
        if (this.editId) {
          obj.id = this.editId;
        }
        // ✅ 用 FormData 构建表单数据
        const fd = new FormData();
        Object.keys(obj).forEach(k => {
          if (obj[k] !== null && obj[k] !== undefined) {
            fd.append(k, obj[k]);
          }
        });
        addProperty(fd).then(res => {
          if (res.success === true) {
            this.$message.success(this.editId ? '编辑成功' : '新增成功');
            // ✅ 重置状态
            this.dialogTableVisible = false;
            this.form = {}; // 用对象更好
            this.repairInfo = [];
            this.photoList = [];
            this.photoFile = null;
            this.editId = null;

            this.getDate(); // 刷新数据
          } else {
            this.$message.error(res.msg || '提交失败');
          }
        });
      });
    },

    // cancledia() {
    //   let obj = {
    //     id: this.form.id,
    //     barcode: this.form.barcode,
    //     name: this.form.name,
    //     usePeriod: this.form.usePeriod,
    //     model: this.form.model,
    //     productSequence: this.form.productSequence,
    //     state: this.form.state,
    //     user: this.form.user,
    //     location: this.form.location,
    //     administrator: this.form.administrator,
    //     purchaseTime: this.form.purchaseTime,
    //     source: this.form.source,
    //     type: this.form.type,
    //     unit: this.form.unit,
    //     amount: this.form.amount,
    //     useCompany: this.form.useCompany,
    //   };
    //   addProperty(obj).then((res) => {
    //     if (res.success == true) {
    //       this.$message.success("编辑成功");
    //       this.dialogTableVisible = false;
    //       this.form = [];
    //       this.repairInfo = [];
    //       this.getDate()
    //     } else {
    //       // this.$message.error(res.msg);
    //     }
    //   });
    //   this.dialogTableVisible = false;
    //   (this.form = []), (this.repairInfo = []);
    // },
  },
};
</script>

<style scoped>
.person-management {
  padding: 10px 20px 0 20px;
}

/deep/ .el-table__row.hover-row {
  background-color: #212830 !important; /* 你想设置的背景色 */
}

.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  width: 120px;
  height: 120px;
  cursor: pointer;
  /* display: flex; */
  align-items: center;
  justify-content: center;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
}

.el-menu-vertical {
  width: 100px;
  border-right: 1px solid rgb(238, 238, 238);
  height: 110px;
  background: #252526;
  color: #fff;
}

.el-menu-item:focus,
.el-menu-item:hover {
  outline: 0;
  background-color: #444446;
  color: #409eff;
  /* background-color: #252526; */
}

.el-menu-item {
  color: #fff;
}

/deep/ .el-input__icon {
  height: 120% !important;
}

/deep/ .el-textarea__inner {
  background-color: #101418 !important;
  border: 0.041667rem solid #101418;
  color: #fff;
}

/deep/ .el-input__inner {
  width: 120px;
}

/deep/ .el-textarea__inner {
  width: 430px;
}

/deep/ .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 62% !important;
}

.avatar-uploader {
  background-color: #2c2c2c; /* 深色背景适配 */
  width: 148px;
  height: 148px;
  border: 1px dashed #8c939d;
  border-radius: 6px;
  position: relative;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  line-height: 148px;
  text-align: center;
  width: 100%;
}

/deep/ .el-upload--picture-card {
  background-color: transparent;
  border: 0px dashed transparent;
  border-radius: 6px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 148px;
  height: 148px;
  cursor: pointer;
  line-height: 146px;
  vertical-align: top;
}

/deep/ .el-form-item__error {
  color: #f56c6c;
  font-size: 12px;
  line-height: 1;
  padding-top: 0px;
  position: absolute;
  top: 80%;
  left: 0;
}

/deep/ .el-dialog {
  position: relative;
  margin: 0 auto 50px;
  /* background: #fff; */
  border-radius: 2px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  width: 30%;
}

/deep/ .el-table__fixed-right::before,
.el-table__fixed::before {
  background: #101418;
}

/deep/ .el-table__fixed-right-patch {
  background: #212830;
}
</style>